<template>
	<div class="z-table" ref="zTable" :style="{height:props.height+'px','overflow-y': 'scroll'}" @scroll="scrollFun">
		<table class="tables">
			<thead class="theads">
				<tr>
					<template v-for="item in props.headers">
						<th>{{item}}</th>
					</template>
				</tr>

			</thead>
			<tbody class="tbodys">

				<template v-for="(item,index) in list">
					<tr
						:style="{background:props.colors[(index+1)%props.colors.length],height:props.theight,transform:`translateY(${scrollTop}px)`}">
						<slot :scoped="item">
							<template v-for="itemtd in colList">
								<td>
									{{item[itemtd]}}
								</td>
							</template>
						</slot>
					</tr>
				</template>

			</tbody>
		</table>

	</div>
</template>


<script setup>
	import {
		defineProps,
		onMounted,
		reactive,
		ref
	} from 'vue';

	const props = defineProps({
		headers: {
			type: Array,
			default: []
		},
		data: {
			type: Array,
			default: []
		},
		colors: {
			type: Array,
			default: ['#0d226fbf', '#20a992bf', '#a2a920bf']
		},
		height: {
			type: String,
			default: "100"
		},
		theight: {
			type: String,
			default: "30"
		},
		gd: {
			type: Boolean,
			default: false
		}

	})
	// 当前显示的数据列表
	let list = ref([])
	// 表格字段数组
	let colList = ref([])
	// 滚动条位置
	let scrollTop = ref(0)
	// //scrollHei能被li高度取余数的整数值。ScroolNum=scrollHei-(scrollHei%liHei)
	let scrollHei = ref(0)
	// 真实展示数据的数据条数
	let showListNum = ref(0)

	// 行 dom
	const tbodyTr = ref()
	let ele
	let zTable = ref()

	let lastTime
	onMounted(() => {

		// 计算 可视化区域展示的数据条数 
		showListNum.value = Math.floor(props.height / props.theight)
		// 

		for (var i = 0; i < showListNum.value; i++) {
			list.value.push(props.data[i])
		}

		colList.value = Object.keys(list.value[0])
		if (!!ele) {
			// console.log(zTable, 91)
			ele.target.scrollTop = 0; //如果元素存在ele中则将scrollTop初始化为0;
			scrollTop.value = 0;

		}

		lastTime = lastTime = new Date().getTime()
		// console.log(colList)
	})

	const scrollFun = (evt) => {
		// console.log(evt,100)
		/**
		 * this.ele = e; //保存元素，方便重置scrollTop值
			this.scrollHei = e.target.scrollTop; //保存滚动条scrollTop值
			this.ScroolNum = this.scrollHei - (this.scrollHei % this
				.liHei); //获取已滚动到页面上方不可见的li元素的总高度（translateY的偏移高度）
			let len = this.ScroolNum / this.liHei; //计算已经有多少个li滚动到页面上方（视图上方用户不可见的数量）
			this.liList = this.tableData.slice(len, len + this
				.showList); //每次滚动事件后重新计算展示内容（截取的内容对应全部数据集的部分内容）
			this.lastTime = new Date().getTime(); //记录最后一次更新时间
		 */
		if (new Date().getTime() - lastTime > 400) {
			ele = evt
			scrollHei.value = ele.target.scrollTop
			scrollTop.value = scrollHei.value - (scrollHei.value % props
			.theight); //获取已滚动到页面上方不可见的li元素的总高度（translateY的偏移高度）
			console.log(scrollTop.value, 120)
			let len = scrollTop.value / props.theight; //计算已经有多少个li滚动到页面上方（视图上方用户不可见的数量）
			list.value = props.data.slice(len, len + showListNum.value); //每次滚动事件后重新计算展示内容（截取的内容对应全部数据集的部分内容）

			// console.log(list.value, 117)
		}

	}

	if (props.gd) {
		let sum = 0
		setInterval(() => {
			sum += 32
			if (sum > props.data.length * props.theight) {
				sum = 0;
			}
			zTable.value.scrollTop = sum

		}, 500)
	}
</script>

<style scoped>
	.z-table {
		width: 100%;
		height: 100%;
	}

	.tables {
		/* border: 1px solid #FFF; */
		width: 100%;
		color: #fff;
		position: relative;
	}

	.theads {
		background-color: #226fbf;
		position: sticky;
		width: 100%;

	}

	.theads tr {
		line-height: 30px;
		text-align: center;

		width: 100%;
	}

	.tbodys tr {
		text-align: center;
		line-height: 30px;
	}

	.tbodys {
		height: 200px;
		overflow-y: scroll;
		background-color: #0d2067;
	}

	::-webkit-scrollbar {
		width: 0px;
		/* 设置滚动条的宽度 */
	}

	::-webkit-scrollbar-thumb {
		background-color: #888;
		/* 设置滚动条滑块的颜色 */
		border-radius: 5px;
		/* 设置滚动条滑块的圆角 */
	}

	::-webkit-scrollbar-thumb:hover {
		background-color: #555;
		/* 设置滚动条滑块在悬停时的颜色 */
	}

	::-webkit-scrollbar-track {
		background-color: #eee;
		/* 设置滚动条背景的颜色 */
	}
</style>